<template>
  <!-- 单商品banner -->
  <view class="goods-detail">
    <view class="shop-info">
      <template v-if="type != 'refund'">
        <text
          class="iconfont icon-store"
          style="font-size: 44rpx; font-weight: 500"
        ></text>
        <view>{{
          (storeMdData && storeMdData.name) ||
          orderitem.mch_name ||
          orderitem.shop_name
        }}</view>
        <text
          class="iconfont icon-arrow-right"
          style="font-size: 22rpx; font-weight: 400"
        ></text>
      </template>
      <text v-else class="title">{{ $t("mdAdmin.salesOut") }}</text>
    </view>
    <view
      v-for="(goodsItem, goodsIndex) in orderitem.goods_list"
      :key="goodsIndex"
      class="list-good-item"
      @click="gotoDetail(goodsItem.goods_id)"
    >
      <view class="good-item-body">
        <image :src="goodsItem.goods_pic" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-name text-more-1">{{ goodsItem.name }}</view>
          <view class="goods-sku">
            <view class="flex-x-sb">
              <view
                class="sku-box text-more-2"
                v-if="orderitem.order_type != 1 && orderitem.order_type != 2"
              >
                <text
                  class="sku-item"
                  v-for="(attr, attr_index) in goodsItem.attr"
                  :key="attr_index"
                >
                  {{ attr.attr_group_name }}：{{ attr.attr_name }}
                  <text
                    v-if="goodsItem.attr.length - 1 > attr_index"
                    class="sku-line"
                    >|</text
                  >
                </text>
              </view>
              <view
                v-else-if="orderitem.order_type === 1 && goodsItem.attr.length"
                class="sku-box text-more-2"
              >
                {{ getSku(goodsItem.attr) }}
              </view>
              <view
                v-else-if="orderitem.order_type === 2"
                class="sku-box text-more-2"
              >
                {{ goodsItem.attr.date }} {{ goodsItem.attr.time }}
              </view>
              <view>X{{ goodsItem.num }}</view>
            </view>
          </view>
          <view class="goods-sku" v-if="goodsItem.food_ext_goods">
            <text
              class="sku-item"
              v-for="(attr, attr_index) in goodsItem.food_ext_goods"
              :key="attr_index"
              style="margin-right: 6px"
            >
              {{ attr.name }}x{{ attr.num }}
            </text>
          </view>
          <view class="goods-seckill" v-if="goodsItem.delivery_rules">
            {{ goodsItem.delivery_rules.name }}：{{
              goodsItem.delivery_rules.times
            }}
          </view>
          <view class="goods-price" v-if="orderitem.order_type != 7"
            >￥{{ goodsItem.total_price }}</view
          >
          <view class="goods-price" v-else
            >{{
              goodsItem.integral_price && goodsItem.integral_price > 0
                ? `${goodsItem.integral_price}积分`
                : ""
            }}{{
              goodsItem.integral_price > 0 && goodsItem.total_price > 0
                ? "+"
                : ""
            }}{{
              goodsItem.total_price && goodsItem.total_price > 0
                ? `${goodsItem.total_price}元`
                : ""
            }}</view
          >
          <view class="btnSend" v-if="goodsItem.goods_install === 1">
            <view class="btn" @click.stop="send(goodsItem)"> 确认收货 </view>
          </view>
          <view class="btnSendMsg" v-if="goodsItem.goods_install === 2">
            已安装
          </view>
        </view>
      </view>
      <!-- {{goodsItem.order_form}} -->
      <view @click.stop="stop">
        <toolsForm :form="goodsItem.order_form" :disabled="true"></toolsForm>
      </view>
      <!-- 赠送核销卡 -->
      <!-- <view class="verify-card" v-if="goodsItem.verify_card.length">
        <view
          class="verify-card-item"
          v-for="(item, index) in goodsItem.verify_card"
          :key="index"
          @click.stop="gotoDetailCard(item, orderitem.is_pay)"
        >
          <text>[赠送] {{ item.name }}</text>
          <text>x1</text>
        </view>
      </view> -->
      <!-- 配送信息 -->
      <view v-if="goodsItem.order_type == 0" class="goods-express">
        <view class="express-info">
          <view>{{ $t("order.distribution") }}</view>
          <text>{{
            goodsItem.delivery_type == 1
              ? goodsItem.shop.name
              : $t("order.express")
          }}</text>
        </view>
        <view>{{
          goodsItem.delivery_type == 1 ? $t("order.store") : $t("order.express")
        }}</view>
      </view>
      <view class="supplierExpress" v-if="goodsItem.cloudInfo">
        <text v-if="goodsItem.cloudInfo.send_type == 1"
          >{{ goodsItem.cloudInfo.express_name }}:{{
            goodsItem.cloudInfo.express_no
          }}</text
        >

        <text v-if="goodsItem.cloudInfo.send_type == 2">同城配送</text>
        <!-- {{goodsItem.cloudInfo.send_type}} -->

        <view
          v-if="goodsItem.cloudInfo.send_type == 1"
          class="log"
          @click.stop="see(goodsItem.cloudInfo)"
          >查看物流&gt;</view
        >
      </view>
      <!-- 商品底部按钮(售后、加购物车) -->
      <!-- 当订单状态为已取消或已完成时显示该按钮 -->
      <view
        class="goods-btns"
        v-if="
          (orderitem.trade_status == 1 || orderitem.trade_status == 3) &&
          orderitem.order_type != 3 &&
          orderitem.order_type != 4
        "
      >
        <view
          v-if="
            orderitem.trade_status == 3 &&
            stores.is_comment == 1 &&
            goodsItem.is_comment == 1
          "
          @click.stop="commentGoods(goodsItem)"
          >{{ $t("mdAdmin.evaluation") }}</view
        >
        <view
          v-if="
            orderitem.trade_status == 3 &&
            goodsItem.order_refund_enable == 1 &&
            goodsItem.is_order_refund == 0 &&
            orderitem.order_type != 7
          "
          @click.stop="orderRefund(goodsItem)"
          >{{ $t("order.afterSale") }}</view
        >
        <view
          v-if="orderitem.order_type != 7"
          @click.stop="buyAgain(goodsItem)"
          >{{ $t("common.addCart") }}</view
        >
      </view>
    </view>
    <!-- 客服及电话 -->
    <view class="page-footer" v-if="false">
      <view class="group-item">
        <image :src="asyncImgs.images.kefu_icon" alt=""></image>
        <text>{{ $t("my.service") }}</text>
      </view>
      <view class="group-item">
        <image :src="asyncImgs.images.phone_icon" alt=""></image>
        <text>{{ $t("order.call") }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import toolsForm from "../tools-form.vue";
export default {
  components: {
    toolsForm,
  },
  data() {
    return {};
  },

  computed: {
    getSku() {
      return (list) => {
        let start = list[0],
          end = list[list.length - 1],
          startTime,
          endTime;

        if (start) {
          start.month =
            parseInt(start.month) < 10 ? parseInt(start.month) : start.month;
          start.day =
            parseInt(start.day) < 10 ? parseInt(start.day) : start.day;
          startTime = `${start.month}月${start.day}日`;
        }
        
        if (end) {
          let date = new Date(new Date(end.date).getTime() + 86400000);
          endTime = `${date.getUTCMonth() + 1}月${date.getDate()}日`;
        }

        return `${startTime}-${endTime}`;
      };
    },
  },

  props: {
    orderitem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: String,
      default: "",
    },
  },
  filters: {},
  methods: {
    send(goodsItem) {
      this.$utils.showModal(
        "提示",
        "是否确认收货？",
        true,
        async () => {
          let res = await this.$allrequest.order.agentIsInstall({
            order_detail_id: goodsItem.order_detail_id,
          });
          if (!res.code) {
            this.$utils.showModal("提示", res.msg, false, () => {
              uni.navigateBack();
            });
            return;
          }
          this.$utils.toast(res.msg);
        },
        () => {}
      );
    },
    see(item) {
      uni.setStorageSync(
        "expressInfo",
        JSON.stringify({
          express: item.express_name,
          express_no: item.express_no,
          ...item.express_detail,
        })
      );
      this.$utils.toUrl(`/user/express/express`, "navigate");
    },

    stop() {
      return false;
    },
    buyAgain(item) {
      this.$emit("buyAgain", { item: item, type: "one" });
    },
    orderRefund(item) {
      this.$emit("orderRefund", item);
    },
    commentGoods(item) {
      this.$emit("commentGoods", item);
    },
    gotoDetail(goods_id) {
      if (this.orderitem.order_type == 3) {
        this.$utils.toUrl("/alipay-order/orderMeal/orderMeal");
        return;
      }
      this.$utils.toUrl("/goods/goods/goods?id=" + goods_id);
    },
    gotoDetailCard({ sale_id, sale_status }, is_pay) {
      if (is_pay === 1) {
        this.$utils.toUrl(
          `/user/write_off_card/card-list/detail-card?id=${sale_id}&status=${sale_status}`
        );
        return;
      }

      this.$u.toast("未支付订单不可查看！");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-detail {
  width: 100%;
  background: #ffffff;
  padding-top: 30rpx;
  padding-bottom: 12rpx;
  border-radius: 20rpx;

  .shop-info {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    font-weight: 600;

    > view {
      height: 40rpx;
      font-size: 28rpx;
    }
  }

  .list-good-item {
    border-bottom: 1rpx solid #f2f2f2;
    padding: 24rpx;
    .good-item-body {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      image {
        width: 166rpx;
        height: 166rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .goods-info {
        flex: 1;
        // max-width: 480rpx;

        .goods-name {
          font-size: 28rpx;
          color: #262626;
          line-height: 40rpx;
        }

        .goods-sku {
          font-size: 24rpx;
          color: #8c8c8c;
          line-height: 34rpx;
          margin: 10rpx 0 14rpx;
          .sku-box {
            width: 326rpx;
            .sku-line {
              margin: 0 10rpx;
            }
          }
        }

        .goods-price {
          height: 44rpx;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }

    .verify-card {
      width: 100%;
      padding-top: 20rpx;
      .verify-card-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .verify-card-item:last-child {
        padding-bottom: 0;
      }
    }

    .goods-express {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
      margin-top: 30rpx;

      .express-info {
        display: flex;
        align-items: center;

        view {
          width: 50rpx;
          height: 26rpx;
          background: #ffffff;
          border: 1rpx solid #f27e6e;
          border-radius: 6rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18rpx;
          font-family: PingFang SC;
          color: #f2290e;
        }

        text {
          color: #8c8c8c;
          margin-left: 16rpx;
        }
      }
    }
    .supplierExpress {
      font-size: 24rpx;
      color: #8c8c8c;
      margin-top: 30rpx;
    }

    .goods-btns {
      width: 100%;
      margin-top: 30rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      view {
        width: 152rpx;
        height: 60rpx;
        background: #ffffff;
        border: 1rpx solid #acacac;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        text-align: center;
        line-height: 60rpx;
        margin-left: 24rpx;
      }
    }
  }

  .list-good-item:last-child {
    border-bottom: 0 none;
  }

  .page-footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30rpx 0 4rpx 0;
    // border-top: 1rpx solid #f2f2f2;

    .group-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;

      image {
        width: 28rpx;
        height: 28rpx;
        display: block;
        margin-right: 14rpx;
      }

      text {
        font-size: 26rpx;
        color: #262626;
        line-height: 44rpx;
      }
    }

    .group-item:last-child {
      border-left: 2rpx solid #f2f2f2;
    }
  }
}

.log {
  padding: 5rpx 0;
  text-align: right;
}

.goods-seckill {
  flex: 1;
  display: flex;
  align-items: center;
  color: #ff5c26;
  font-size: 24rpx;
  overflow: hidden;
}

.btnSend {
  text-align: right;

  .btn {
    display: inline-block;
    padding: 4rpx 12rpx;
    font-size: 28rpx;
    color: #fff;
    background: #f0250e;
    border-radius: 32px;
  }
}

.btnSendMsg {
  display: inline-block;
  color: #f0250e;
  font-size: 28rpx;
}
</style>
